<template>
        <div  class="cartcontrol">
            <transition name="move">
        <div class="cart-decrease"  @click.stop.prevent="decreaseCart" v-show="food.count>0">
                <p class="inner iconfont">&#xe604;</p>
        </div>
            </transition>
        <div class="cart-count" v-show="food.count>0">{{ food.count }}</div>
        <div class="cart-add iconfont" @click.stop.prevent="addCart">&#xe61a;</div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {eventBus} from "../../components/event-bus.js"
    export default {
        name: "cartcontrol",
        props:{
            food:{
                type:Object
            }
        },
        created(){
        },
        methods:{
            addCart(event){
                if(!event._constructed){
                    return;
                }
                if(!this.food.count){
                    Vue.set(this.food,'count',1);
                }else{
                    this.food.count ++
                }
               this.$nextTick( ()=>{
                eventBus.$emit('addcart',event.target)
               } )
    },
            decreaseCart(){
                if(!event._constructed){
                    return;
                }
                if(this.food.count){
                    this.food.count--
                }
            }
        },
        cartAdd(el){
            if (!event._constructed) {
                return;
            }
            if (!this.food.count) {
                Vue.set(this.food, 'count', 1);
            } else {
                this.food.count++;
            }
        },

    }
</script>

<style lang="stylus" scoped>
           .cartcontrol
             font-size:0
            .cart-decrease
             display:inline-block
             padding:6px
             transition: all 0.4s linear
             &.move-enter-active,&.move-leave-active
                opacity :1
                transform: translate3d(0,0,0)
             .inner
               display:inline-block
               ine-height:24px
               font-size:24px
               color:rgb(0,160,220)
               transition: all 0.4s linear
               transform:rotate(0deg)
             &.move-enter,&.move-leave-to
                opacity :0
                transform :translate3d(24px,0,0)
                .inner
                    transform:rotate(180deg)
           .cart-count
             display:inline-block
             vertical-align:top
             width:12px
             padding-top:6px
             line-height:24px
             text-align:center
             font-size:10px
             color:rgb(147,153,159)
           .cart-add
             display:inline-block
             padding:6px
             line-height:24px
             font-size:24px
             color:rgb(0,160,220)
    </style>